﻿<%@ Page Language="C#" AutoEventWireup="true" Inherits="SampleMultiple" Codebehind="SampleMultiple.aspx.cs" %> 
  
<%@ Import Namespace="System.Web.Services" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
    <title></title> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css"
        type="text/css" media="all" /> 

    <link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
    <link href="Styles/start/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
 
    <script src="Scripts/jquery-1.7.js" type="text/javascript"></script>
    <script type="text/javascript" src="Scripts/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="Scripts/ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="Scripts/ui/jquery.ui.position.js"></script>
    <script type="text/javascript" src="Scripts/ui/jquery.ui.autocomplete.js"></script>


    <script type="text/javascript">
        var tempString;
        $(function () {
            $("#<%= txtMultipleName.ClientID %>").autocomplete({
                source: function (request, response) {
                    $.getJSON("AutoComplete.ashx", {
                        term: extractLast(request.term)
                    }, response);
                },
                search: function () {
                    // custom minLength 
                    var term = extractLast(this.value);
                    if (term.length < 1) {
                        return false;
                    }
                },
                focus: function () {
                    // prevent value inserted on focus 
                    return false;
                },
                select: function (event, ui) {
                    var terms = split(this.value);
                    // remove the current input 
                    terms.pop();
                    // add the selected item 
                    //terms.push(ui.item.value); --original
                    terms.push(ui.item.comment);
                    // add placeholder to get the comma-and-space at the end 
                    terms.push("");
                    this.value = terms.join(" ");
                    tempString = this.value;
                    document.getElementById("Label1").innerHTML = this.value;
                    //parent.'<%= Label1.ClientID %>' = this.value;
                    return false;
                }
            })
            .data("autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
				.data("item.autocomplete", item)
				.append("<a>" + item.value + ":" + item.comment + "</a>")
				.appendTo(ul);
            };
            function split(val) {
                return val.split(/ \s*/);
            }
            function extractLast(term) {
                return split(term).pop();
            }
        }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    Multiple word:<br />
&nbsp;<asp:TextBox ID="txtMultipleName" runat="server" Width="400px" Height="226px" 
        TextMode="MultiLine"></asp:TextBox> 
    
    <asp:Button ID="Button1" runat="server" Text="Generate rich text" 
        onclick="Button1_Click" />
    <br />
    <br />
    <br />
    
       <asp:Label ID="Label1" runat="server" Text="" CssClass="boldText">text with bold  </asp:Label>
         <asp:Label ID="Label2" runat="server" Text=""  CssClass="underlineText">underlined text</asp:Label>
      
    <br />
    <br />
      
    <asp:PlaceHolder ID="PlaceHolder1" runat="server">
    
     
    
    </asp:PlaceHolder>
    
    
    </form> 
</body> 
</html>